/****************reset**************/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0 }
body, button, input, select, textarea { font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;color: #333; -ms-overflow-style: scrollbar }
button, input, select, textarea { font-size: 100% }
a { color: #324057; text-decoration: none;outline: 0; transition: color .1s }
a:hover { color: #20a0ff }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img, area, a { border: 0; outline: 0 }
address, caption, cite, code, dfn, em, th, var, i { font-style: normal; font-weight: normal }
code, kbd, pre, samp { font-family: courier new, courier, monospace }
ol, ul { list-style: none }
body { background: #fff;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
small { font-size: 12px }
h1, h2, h3, h4, h5, h6 { font-size: 100% }
sup { vertical-align: text-top }
sub { vertical-align: text-bottom }
legend { color: #000 }

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 10px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 10px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

html, body {
  width: 100%;
  height: 100%;
}

/****************width and height**************/
.full-width {width: 100%;}
.full-height {height: 100%;}
.max-w-100 {max-width: 100px;}
.min-w-100 {min-width: 100px;}
.max-w-200 {max-width: 200px;}
.min-w-200 {min-width: 200px}

/****************margin**************/
.margin {margin: 8px}
.mt-20 {margin-top: 20px;}
.mr-20 {margin-right: 20px;}
.mb-20 {margin-bottom: 20px;}
.ml-20 {margin-left: 20px;}
.mt-5 {margin-top: 5px;}
.mr-5 {margin-right: 5px;}
.mb-5 {margin-bottom: 5px;}
.ml-5 {margin-left: 5px;}
.mt-10 {margin-top: 10px;}
.mr-10 {margin-right: 10px;}
.mb-10 {margin-bottom: 10px;}
.ml-10 {margin-left: 10px;}

/****************padding**************/
.padding {padding: 8px;}
.p-20 {padding: 20px;}
.pt-20 {padding-top: 20px;}
.pr-20 {padding-right: 20px;}
.pb-20 {padding-bottom: 20px;}
.pl-20 {padding-left: 20px;}
.pt-5 {padding-top: 5px;}
.pr-5 {padding-right: 5px;}
.pb-5 {padding-bottom: 5px;}
.pl-5 {padding-left: 5px;}

/*****************font-size*************/
.font-30 { font-size: 30px; }
.font-24 { font-size: 24px; }
.font-20 { font-size: 20px; }
.font-18 { font-size: 18px; }
.font-16 { font-size: 16px; }
.font-15 { font-size: 15px; }
.font-14 { font-size: 14px; }
.font-13 { font-size: 13px; }
.font-12 { font-size: 12px; }


/****************flex-box**************/
.flex {display:flex;}
.inline-flex {display:inline-flex;}
.flex-center{justify-content: center;align-items: center;}
/*横向或纵向*/
.flex-row {flex-direction:row;}
.flex-col {flex-direction:column;}
.flex-row-reverse {flex-direction:row-reverse;}
.flex-col-reverse {flex-direction:column-reverse;}
.flex-wrap {flex-wrap:wrap;}
/*主轴对齐方式*/
.flex-justify-start {justify-content:flex-start;}
.flex-justify-end {justify-content:flex-end;}
.flex-justify-center {justify-content:center;}
.flex-justify-between {justify-content:space-between;}
.flex-justify-around {justify-content:space-around;}
/*侧轴对齐方式*/
.flex-align-start {align-items:flex-start;}
.flex-align-end {align-items:flex-end;}
.flex-align-center {align-items:center;}
.flex-align-baseline {align-items:baseline;}
.flex-align-stretch {align-items:stretch;}
/*主轴换行时行在侧轴的对齐方式，必须定义flex-wrap为换行*/
.flex-content-start {align-content:flex-start;}
.flex-content-end {align-content:flex-end;}
.flex-content-center {align-content:center;}
.flex-content-between {align-content:space-between;}
.flex-content-around {align-content:space-around;}
.flex-content-stretch {align-content:stretch;}
/*允许子元素收缩*/
.flex-child-grow {flex-grow: 1;}/*允许拉伸*/
.flex-child-shrink {flex-shrink: 1;}/*允许收缩*/
.flex-child-noshrink {flex-shrink: 0;}/*不允许收缩*/
.flex-child-average {flex:1;}/*平均分布，兼容旧版必须给宽度*/
.flex-child-first {order: 1;}/*排第一个*/
/*子元素在侧轴的对齐方式*/
.flex-child-align-start {align-self:flex-start;}
.flex-child-align-end {align-self:flex-end;}
.flex-child-align-center {align-self:center;}
.flex-child-align-baseline {align-self:baseline;}
.flex-child-align-stretch {align-self:stretch;}

/****************ant-design-vue**************/
